<template>
    <view class="content">
        <up-sticky bgColor="#fff">
            <up-tabs :list="list" lineColor="#F6D56C" :activeStyle="{
            color: '#F6D56C',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;width:100%"
                @change="onTabChange"></up-tabs>
        </up-sticky>
        <view class="list-wrap">
            <up-list>
                <up-list-item v-for="(item, index) in fetchList" :key="index">
                    <view class="list-wrap-item">
                        <view class="list-wrap-item-status_text">{{ item.authType==1?'学信网':'证书编号' }}</view>
                        <view class="list-wrap-item-title">{{ item.schoolName }}</view>
                        <view class="list-wrap-item-text">
                            <text>姓名：{{ item.fullName }}</text>
                            <text style="margin-left: 20rpx">学历：{{ item.educationTypeName }}</text>
                        </view>
                        <view class="list-wrap-item-text">
                            <text>毕业证书编号：{{ item.verifyCode }}</text>
                        </view>
                        <view class="list-wrap-item-text">
                            <text>{{ item.startDate }}~{{ item.EndDate }}</text>
                        </view>
                    </view>
                </up-list-item>
            </up-list>
        </view>
        <view class="fixed-action-wrap">
            <view class="fixed-action-wrap-button" @click="toPage('/pages/mine/xueli-detail')">添加学历认证</view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onShow } from '@dcloudio/uni-app';
const { proxy } = getCurrentInstance()

const state=reactive({
    actions:[]
})
// 创建响应式数据  
const list = reactive([
    { name: '审核中' },
    { name: '已通过' },
    { name: '未通过' }
]);

const fetchList = ref([])


function onTabChange(e) {
    getList(e.index)
}
function toPage(url) {
    uni.navigateTo({ url })
}

async function getList(state = 0) {
    const res = await proxy.request('/user/ducation/auth/getlist', { state: state }, {
        method: 'GET'
    })
    fetchList.value = res.data.data
    console.log(fetchList.value)
}

onShow(() => {
    getList()
})
</script>

<style lang="scss">
page {
    background-color: #F5F5F5;
    box-sizing: border-box;
}
</style>
<style lang="scss" scoped>
.list-wrap {
    padding: 32rpx;

    .list-wrap-item {
        position: relative;
        margin-bottom: 32rpx;
        width: 100%;
        // height: 196rpx;
        padding: 32rpx;
        box-sizing: border-box;
        background-color: #FFFFFF;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        &-status_text{
            position: absolute;
            top: 0;
            right: 0;
            width: 150rpx;
            height: 50rpx;
            color: #fff;
            text-align: center;
            line-height: 50rpx;
            font-size: 28rpx;
            border-bottom-left-radius: 12rpx;
           background-color: orange;
        }
        &-title {
            width: 100%;
            height: 40rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 32rpx;
            color: #323232;
            line-height: 33rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        &-text {
            text {
                width: 100%;
                height: 40rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #323232;
                line-height: 33rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }
}

.fixed-action-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 128rpx;
    padding: 32rpx;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;

    &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 24px);
        height: 80rpx;
        background: #F2CB51;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
}
</style>